import React, { useEffect, useRef, useState } from "react";
import { Input, Space, Typography, message } from "antd";

import ProTable, { ProTableRef } from "@/components/TablePro"; // 导入封装的表格组件
import Add from "./add";
import { httpClient } from "@/common/httpClient";
import {
  createProtocolConfigField,
  ProtocolConfigField,
} from "./protocolFields";
import { TableAction } from "@/types/public";
import { HearderType } from "@/common/common";
let projectName: "", setProjectName: any;
let loading: boolean, setLoading: any;
let updateData: any, setUpdateData: any;

const ProjectLists: React.FC = () => {
  const tableRef = useRef<ProTableRef>(null);

  [updateData, setUpdateData] = useState<ProtocolConfigField>();
  const [addVisible, setAddVisible] = useState(false);
  [loading, setLoading] = useState(false);
  [projectName, setProjectName] = useState("");
  const tableAction: TableAction<ProtocolConfigField> = {
    add: () => {
      setUpdateData(undefined);
      setAddVisible(true);
    },
    edit: (record: ProtocolConfigField) => {
      setUpdateData(record);
      setAddVisible(true);
    },
    delete: async (rows: ProtocolConfigField[]) => {
      let res = await httpClient.post(
        "/admin/protocol_management/delete",
        { ids: rows.join(",") },
        {
          headers: { "Content-Type": HearderType[0] },
        }
      );
      if (res.data.data) tableRef.current?.refresh();
    },
    migrate: () => {
      setAddVisible(true);
    },
  };
  const columns: any[] = createProtocolConfigField(tableAction);
  const handleSubmit = async (e: any) => {
    let res = await httpClient.post(
      updateData
        ? "/admin/protocol_management/update"
        : "/admin/protocol_management/create",
      updateData ? e : [e],
      updateData
        ? {
            headers: { "Content-Type": HearderType[0] },
          }
        : undefined
    );
    if (res.data.data) tableRef.current?.refresh();
  };
  const handleCloseAdd = () => {
    setAddVisible(false);
  };

  // 模拟API请求
  const fetchProjects = async (params: any) => {
    return await httpClient.get("admin/protocol_management/lists", {
      ...params,
    });
  };

  function deleteProject(id: any): void {
    throw new Error("Function not implemented.");
  }

  function migrateProject(id: any): void {
    throw new Error("Function not implemented.");
  }

  return (
    <div id="app-project" className="app-content">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        {/* 项目表格 */}
        <ProTable<ProtocolConfigField>
          request={fetchProjects}
          tableAction={tableAction}
          columns={columns}
          rowKey="projectId"
          searchable
          ref={tableRef}
          sticky
          resizable
          debounceWait={800}
        />
      </Space>
      <Add
        initialData={updateData}
        visible={addVisible}
        onClose={handleCloseAdd}
        onSubmit={handleSubmit}
      />
    </div>
  );
};

export default ProjectLists;
